<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>落丫</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>

    <link rel="stylesheet" th:href="@{/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/zTree/js/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.excheck.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<br><br>
<form class="layui-form" action="" id="form1">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <input type="hidden" name="id" th:value="${role.id}">
            <input type="text" name="name" th:value="${role.name}" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="hidden" name="ids" id="ids" th:value="${ids}">
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-inline">
            <input type="text" name="description" th:value="${role.description}" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-inline">
            <ul id="pmsTree" class="ztree"></ul>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" onclick="doSave();">保存</button>
        </div>
    </div>
</form>
<script>
    var layer;
    layui.use(['form','laydate'], function(){
        layer = layui.layer;
    }
    );

    function doSave() {
        //获取选中的权限id，遍历，拼接成1,2,3格式
        var treeObj = $.fn.zTree.getZTreeObj("pmsTree");
        var nodes = treeObj.getCheckedNodes(true);//获取选中的结点数组

        var idsArr = new Array();
        for(var i=0;i<nodes.length;i++){
            var node = nodes[i];
            idsArr.push(node.id);
        }

        console.log(idsArr);
        var ids = idsArr.join(',');
        console.log(ids);
        //把拼接好的权限id数据 赋值给hiddern标签
        $("#ids").val(ids)
        //获取表单数据
        var formData = $("#form1").serialize();
        //提交表单
        $.post("/role/save",formData,function (msg) {
            if(msg.success == 1){
                layer.alert("添加成功",{yes:function () {
                    parent.layer.closeAll();
                }});
            }else{
                layer.alert("添加失败",{yes:function () {
                    parent.layer.closeAll();
                }});
            }
        });
    }
</script>
<script>
    <!--
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    $(document).ready(function(){

        //访问接口数据
        $.get("/permission/listJson",function (responseData) {
            //把json数据转成json对象
            var zNodes = responseData.data;

            $.fn.zTree.init($("#pmsTree"), setting, zNodes);

            //通过id找找到节点，并设置为勾选 1,3,4,5
            var pmsIds = $("#ids").val().split(",");
            //获取ztree的对象
            var zTreeObj = $.fn.zTree.getZTreeObj("pmsTree");
            for (var i = 0; i < pmsIds.length; i++) {
                var pmsId = pmsIds[i];
                console.log(pmsId);
                //通过id找到tree的节点
                var node = zTreeObj.getNodeByParam("id", pmsId);
                //设置节点为勾选的状态
                zTreeObj.checkNode(node);
            }

        });

    });
    //-->
</script>
    </body>
</html>